<sqx-title message="i18n:users.listPageTitle" />
<sqx-layout innerWidth="50" layout="main" titleIcon="user-o" titleText="i18n:users.listTitle">
    <ng-container menu>
        <div class="d-flex justify-content-end">
            <button class="btn btn-text-secondary" (click)="reload()" shortcut="CTRL + B" title="i18n:users.refreshTooltip" type="button">
                <i class="icon-reset"></i> {{ "common.refresh" | sqxTranslate }}
            </button>
            <form class="form-inline ms-2" (ngSubmit)="search()">
                <input
                    class="form-control"
                    [formControl]="usersFilter"
                    placeholder="{{ 'users.search' | sqxTranslate }}"
                    shortcut="CTRL + SHIFT + S"
                    shortcutAction="focus" />
            </form>

            @if (usersState.canCreate | async) {
                <button class="btn btn-success ms-2" routerLink="new" shortcut="CTRL + U" title="i18n:users.createTooltip" type="button">
                    <i class="icon-plus"></i> {{ "users.create" | sqxTranslate }}
                </button>
            }
        </div>
    </ng-container>
    <ng-container>
        <sqx-list-view innerWidth="50rem" [isLoading]="usersState.isLoading | async" table="true">
            <ng-container header>
                <table class="table table-items table-fixed" #header>
                    <thead>
                        <tr>
                            <th class="cell-user">&nbsp;</th>

                            <th class="cell-auto">
                                <span class="truncate">{{ "common.name" | sqxTranslate }}</span>
                            </th>

                            <th class="cell-auto">
                                <span class="truncate">{{ "common.email" | sqxTranslate }}</span>
                            </th>

                            <th class="cell-actions-lg">
                                <span class="truncate">{{ "common.actions" | sqxTranslate }}</span>
                            </th>
                        </tr>
                    </thead>
                </table>
            </ng-container>
            <ng-container>
                @if (usersState.users | async; as users) {
                    <table class="table table-items table-fixed" [sqxSyncWidth]="header">
                        @for (user of users; track user.id) {
                            <tbody [sqxUser]="user"></tbody>
                        }
                    </table>
                }
            </ng-container>
            <ng-container footer>
                <sqx-pager [paging]="usersState.paging | async" (pagingChange)="usersState.page($event)" />
            </ng-container>
        </sqx-list-view>
    </ng-container>
    <ng-template sidebarMenu>
        <div class="panel-nav">
            <a
                class="panel-link"
                attr.aria-label="{{ 'common.help' | sqxTranslate }}"
                queryParamsHandling="preserve"
                replaceUrl="true"
                routerLink="help"
                routerLinkActive="active"
                sqxTourStep="help"
                title="i18n:common.help"
                titlePosition="left">
                <i class="icon-help2"></i>
            </a>
        </div>
    </ng-template>
</sqx-layout>
<router-outlet></router-outlet>
